<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :sm="6" :md="6" :lg="6" v-for="(item,key) in count" :key="key">
				<div class="card-panel">
					<div style="display: inline;">
						<i :class="item.icon" :style="'color:'+item.color"></i>
					</div>
					<div style="display: inline;float: right;">
						<span class="card-panel-text">
							{{item.label}}
						</span>
						<div class="card-panel-num">
							{{item.num}}
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20" style="margin-top: 24px;">
			<el-col :sm="6" :md="6" :lg="6" v-for="(item,key) in count" :key="key">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div style="display: inline;font-size: 15px;">
							{{item.label}}
						</div>
						<div style="display: inline;float: right;">
							<el-tooltip class="item" effect="light" content="仅统计未完成任务" placement="top">
								<i class="el-icon-warning-outline"></i>
							</el-tooltip>
						</div>
					</div>
					<div class="box-content">
						待审核：<span>{{item.num}}</span>
					</div>
					<div class="box-footer">
						<el-button type="danger" size="small">
							立即处理
						</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: 'Index',
		data() {
			return {
				count: [
					{
						label: '新增用户数',
						icon: 'el-icon-user-solid',
						color: '#F56C6C',
						num: 120
					},
					{
						label: '新增订单数',
						icon: 'el-icon-s-order',
						color: '#409EFF',
						num: 500
					},
					{
						label: '新增评价数',
						icon: 'el-icon-s-comment',
						color: '#67C23A',
						num: 750
					},
					{
						label: '总浏览次数',
						icon: 'el-icon-s-data',
						color: '#cc44cc',
						num: 1024
					}
				]
			}
		}
	}
</script>

<style type="text/css">
	@import url("../../assets/style/index.css");
</style>
